<template>
  <div class="redu_root">
    <div class="redu_step">
      <el-steps :active="stepActive">
        <el-step title="基本信息" description="配置活动的基本信息"></el-step>
        <el-step title="生效条件" description="活动需要用到的条件"></el-step>
        <el-step title="限制条件" description="对活动所有限制的条件"></el-step>
      </el-steps>
    </div>
    <div class="step_one step_form" v-show="stepActive === 1">
      <el-form
        :model="stepOneData"
        :rules="stepOneRule"
        ref="ruleForm1"
        label-width="100px"
        class="form-com-css"
      >
        <el-form-item label="活动名称" prop="activityName">
          <el-input v-model="stepOneData.activityName"></el-input>
        </el-form-item>
        <el-form-item label="活动用途" prop="activityUse">
          <el-radio v-model="stepOneData.activityUse" label="CSP"
            >消费</el-radio
          >
          <br />
          <el-radio v-model="stepOneData.activityUse" label="RCH"
            >充值</el-radio
          >
          <br />
          <!-- <el-radio v-model="stepOneData.activityUse" label="LABEl"
            >标签</el-radio
          > -->
        </el-form-item>
        <el-form-item label="活动类型" prop="activityType">
          <!-- 活动用途是充值时： 固定金额，固定数量禁选 -->
          <el-radio
            v-model="stepOneData.activityType"
            label="RFA"
            :disabled="stepOneData.activityUse == 'RCH'"
            >按固定金额</el-radio
          >
          <br />
          <el-radio
            v-model="stepOneData.activityType"
            label="LOR"
            :disabled="stepOneData.activityUse == 'RCH'"
            >按固定数量</el-radio
          >
          <div class="disflx one-alert">
            <el-radio v-model="stepOneData.activityType" label="AAL">
              每升立减(以金额为门槛)
            </el-radio>

            <!-- <el-alert
              class="alert-style"
              title="订单金额/油机价=升数，然后在对升数立减。支持阶梯"
              type="info"
              show-icon
            >
            </el-alert> -->
          </div>
          <div class="disflx one-alert">
            <el-radio
              :disabled="stepOneData.activityUse == 'RCH'"
              v-model="stepOneData.activityType"
              label="AALL"
            >
              每升立减(以升数为门槛)
            </el-radio>
          </div>
        </el-form-item>
        <el-form-item label="活动方式" prop="activityMode">
          <el-radio v-model="stepOneData.activityMode" label="FAD"
            >定额立减</el-radio
          >
          <br />
          <el-radio
            v-model="stepOneData.activityMode"
            label="PAR"
            :disabled="stepOneData.activityUse === 'RCH'"
            >百分比立减</el-radio
          >
          <br />
          <el-radio v-model="stepOneData.activityMode" label="RDD" disabled
            >随机立减</el-radio
          >
        </el-form-item>
        <el-form-item class="nolable">
          <el-button @click="abortEdit">取消</el-button>
          <el-button type="primary" @click="oneNextEvent"
            >保存并下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="step_two step_form" v-show="stepActive === 2">
      <el-form
        :model="stepTwoData"
        :rules="stepTwoRules"
        ref="ruleForm2"
        class="form-com-css"
      >
        <el-form-item prop="selectStationList">
          <div class="t">参与活动油站/商户</div>
          <div>
            <el-button
              type="primary"
              @click="getStationList"
              v-if="
                !(
                  $store.state.user.userLevel === '2' || stationList.length == 1
                )
              "
              >关联加油站</el-button
            >
          </div>
          <div>
            <el-table
              border
              :data="stationList.length == 1 ? stationList : selectStationList"
              class="tableStyle"
            >
              <el-table-column
                type="index"
                label="序号"
                width="180"
              ></el-table-column>
              <el-table-column
                prop="stationName"
                label="油站名称"
              ></el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="delRowEvent('selectStationList', scope.$index)"
                    type="text"
                    size="small"
                    v-if="
                      !(
                        $store.state.user.userLevel === '2' ||
                        stationList.length == 1
                      )
                    "
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item prop="youplist">
          <div class="t">参与活动油品</div>
          <div>
            <!-- <el-button :type="stepTwoData.oilPartOrAll?'primary':''" @click="()=>{stepTwoData.oilPartOrAll=true;}">全部油品</el-button> -->
            <el-button type="primary" @click="showOilOpen">添加油品</el-button>
          </div>
          <div>
            <el-table border :data="selectOilList" class="tableStyle">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="oilName" label="油品名称">
              </el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                    @click="delRowEvent('selectOilList', scope.$index)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item prop="stepTwoData">
          <div class="t">参与活动车主</div>
          <div>
            <el-radio v-model="stepTwoData.memberCondition" label="all"
              >全选</el-radio
            >
            <el-radio v-model="stepTwoData.memberCondition" label="part"
              >指定</el-radio
            >
            <el-divider></el-divider>
          </div>
          <div class="disflx">
            <el-checkbox
              style="margin-right: 30px; width: 100px"
              :indeterminate="isIndeterminateMemberLevels"
              v-model="checkAllMemberLevels"
              @change="handleCheckAllChange($event, 'memberLevels')"
              :disabled="stepTwoData.memberCondition == 'all'"
            >
              按会员等级
            </el-checkbox>
            <el-checkbox-group
              v-model="stepTwoData.memberLevels"
              @change="handleCheckedChange($event, 'memberLevels')"
              class="act_style"
            >
              <!-- :disabled="stepTwoData.memberCondition == 'all'"  :  下面的卡等级类型原本的禁用条件都是这个。-->
              <el-checkbox
                :disabled="stepTwoData.memberCondition == 'all'"
                label="1"
                >普卡</el-checkbox
              >
              <el-checkbox
                :disabled="stepTwoData.memberCondition == 'all'"
                label="2"
                >银卡</el-checkbox
              >
              <el-checkbox
                :disabled="stepTwoData.memberCondition == 'all'"
                label="3"
                >金卡</el-checkbox
              >
              <el-checkbox
                :disabled="stepTwoData.memberCondition == 'all'"
                label="4"
                >钻卡</el-checkbox
              >
              <el-checkbox
                :disabled="stepTwoData.memberCondition == 'all'"
                label="5"
                >黑卡</el-checkbox
              >
              <!-- <el-checkbox
                :disabled="stepTwoData.memberCondition == 'all'"
                label="99"
                >超级会员</el-checkbox
              > -->
              <el-checkbox
                v-model="stepThreeData.memberLevelList"
                :disabled="stepTwoData.memberCondition == 'all'"
                label="96"
                class="checkbox-super"
                >超级会员-月卡</el-checkbox
              >
              <el-checkbox
                v-model="stepThreeData.memberLevelList"
                :disabled="stepTwoData.memberCondition == 'all'"
                label="97"
                class="checkbox-super"
                >超级会员-季卡</el-checkbox
              >
              <el-checkbox
                v-model="stepThreeData.memberLevelList"
                :disabled="stepTwoData.memberCondition == 'all'"
                label="98"
                class="checkbox-super"
                >超级会员-年卡</el-checkbox
              >
              <!-- 车队卡暂时还没有 -->
              <!-- <el-checkbox

              :disabled="stepTwoData.memberCondition == 'all'"
              label="6"
            >
              车队卡
            </el-checkbox> -->
            </el-checkbox-group>
          </div>
          <div class="disflx">
            <el-checkbox
              :disabled="stepTwoData.memberCondition == 'all'"
              style="margin-right: 30px; width: 100px"
              :indeterminate="isIndeterminatePaymentMethods"
              v-model="checkAllPaymentMethods"
              @change="handleCheckAllChange($event, 'paymentMethods')"
            >
              按支付方式
            </el-checkbox>
            <el-checkbox-group
              v-model="stepTwoData.paymentMethods"
              @change="handleCheckedChange($event, 'paymentMethods')"
              class="act_style"
            >
              <el-checkbox
                label="wx"
                :disabled="stepTwoData.memberCondition == 'all'"
                >微信</el-checkbox
              >
              <!-- 参与活动是全选 或者活动用途为充值时，支付宝禁止选择 -->
              <el-checkbox
                label="zfb"
                v-if="stepOneData.activityUse !== 'RCH'"
                :disabled="stepTwoData.memberCondition == 'all'"
              >
                支付宝
              </el-checkbox>
              <el-checkbox
                label="xj"
                v-if="stepOneData.activityUse == 'CSP'"
                :disabled="stepTwoData.memberCondition == 'all'"
                >现金</el-checkbox
              >
              <!-- :disabled="stepTwoData.memberCondition == 'all'" 咱不测试，先手动置灰 -->
              <el-checkbox
                label="xj"
                v-if="stepOneData.activityUse == 'RCH'"
                :disabled="stepTwoData.memberCondition == 'all'"
                >手动增加</el-checkbox
              >
              <el-checkbox
                label="yhk"
                v-if="stepOneData.activityUse == 'CSP'"
                :disabled="stepTwoData.memberCondition == 'all'"
                >银行卡</el-checkbox
              >
              <!-- <el-checkbox
                label="dzk"
                v-if="stepOneData.activityUse == 'CSP'"
                :disabled="stepTwoData.memberCondition == 'all'"
                >电子卡</el-checkbox
              >
              <el-checkbox
                label="dkq"
                v-if="stepOneData.activityUse == 'CSP'"
                :disabled="stepTwoData.memberCondition == 'all'"
                >实体卡</el-checkbox
              > -->
              <el-checkbox
                label="pos"
                v-if="stepOneData.activityUse == 'CSP'"
                :disabled="stepTwoData.memberCondition == 'all'"
                >POS机扫码</el-checkbox
              >
              <el-checkbox
                label="cdk"
                v-if="stepOneData.activityUse == 'CSP'"
                :disabled="stepTwoData.memberCondition == 'all'"
                >车队卡</el-checkbox
              >
            </el-checkbox-group>
            <!--
            <el-radio v-model="stepTwoData.paymentMethods" :disabled="stepTwoData.memberCondition == 'all'" label="dzk">会员卡</el-radio>
            <el-radio v-model="stepTwoData.paymentMethods" :disabled="stepTwoData.memberCondition == 'all'" label="xj">现金</el-radio>
            <el-radio v-model="stepTwoData.paymentMethods" :disabled="stepTwoData.memberCondition == 'all'" label="yl">刷卡</el-radio>
            -->
          </div>
          <div class="disflx" v-if="stepOneData.activityUse == 'CSP'">
            <el-checkbox
              :disabled="stepTwoData.memberCondition == 'all'"
              style="margin-right: 30px; width: 100px"
              :indeterminate="isIndeterminateCardTypes"
              v-model="checkAllCardTypes"
              @change="handleCheckAllChange($event, 'cardTypes')"
            >
              按电子卡
            </el-checkbox>
            <el-checkbox-group
              @change="handleCheckedChange($event, 'cardTypes')"
              class="act_style"
              v-model="stepTwoData.cardTypes"
            >
              <el-checkbox
                v-for="ele in dzkList"
                :label="ele"
                :key="ele"
                :disabled="stepTwoData.memberCondition == 'all'"
                >{{ formatType(ele) }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="disflx">
            <el-checkbox
              :disabled="stepTwoData.memberCondition == 'all'"
              style="margin-right: 30px; width: 100px"
              :indeterminate="isIndeterminatePhysicalCardTypes"
              v-model="checkAllPhysicalCardTypes"
              @change="handleCheckAllChange($event, 'physicalCardTypes')"
            >
              实体卡
            </el-checkbox>
            <el-checkbox-group
              @change="handleCheckedChange($event, 'physicalCardTypes')"
              class="act_style"
              v-model="stepTwoData.physicalCardTypes"
            >
              <!-- 消费 -->
              <el-checkbox
                v-if="stepOneData.activityUse == 'CSP'"
                v-for="ele2 in dkqList"
                :label="ele2"
                :key="ele2"
                :disabled="stepTwoData.memberCondition == 'all'"
                >{{ formatType2(ele2) }}</el-checkbox
              >
              <!-- 充值 -->
              <el-checkbox
                v-if="stepOneData.activityUse == 'RCH'"
                v-for="ele2 in dkqList2"
                :label="ele2"
                :key="ele2"
                :disabled="stepTwoData.memberCondition == 'all'"
                >{{ formatType3(ele2) }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="disflx">
            <el-checkbox
              :disabled="stepTwoData.memberCondition == 'all'"
              style="margin-right: 30px; width: 100px"
              :indeterminate="isIndeterminateMemberCategories"
              v-model="checkAllMemberCategories"
              @change="handleCheckAllChange($event, 'memberCategories')"
            >
              新老用户
            </el-checkbox>
            <el-checkbox-group
              @change="handleCheckedChange($event, 'memberCategories')"
              class="act_style"
              v-model="stepTwoData.memberCategories"
            >
              <el-checkbox
                label="old"
                :disabled="stepTwoData.memberCondition == 'all'"
                >老用户</el-checkbox
              >
              <el-checkbox
                label="new"
                :disabled="stepTwoData.memberCondition == 'all'"
                >新用户</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="disflx">
            <el-checkbox
              :disabled="stepTwoData.memberCondition == 'all'"
              style="margin-right: 30px; width: 100px"
              :indeterminate="isIndeterminateMemberTags"
              v-model="checkAllMemberTags"
              @change="handleCheckAllChange($event, 'memberTags')"
            >
              标签用户
            </el-checkbox>
            <!-- :disabled="stepTwoData.memberCondition == 'all'" 原本的按钮禁用条件都是这个 -->
            <el-checkbox-group
              @change="handleCheckedChange($event, 'memberTags')"
              class="act_style"
              v-model="stepTwoData.memberTags"
            >
              <el-checkbox
                label="labelUser"
                :disabled="stepTwoData.memberCondition == 'all'"
                >标签用户</el-checkbox
              >
              <!-- <el-checkbox  :disabled="stepTwoData.memberCondition == 'all'"  label="super" >超级会员</el-checkbox > -->
            </el-checkbox-group>
          </div>
        </el-form-item>
        <!-- 车队列表 ，选择车队卡选项时才会展示 -->
        <el-form-item
          prop="teamcardlist"
          v-show="stepTwoData.memberLevels === '6'"
        >
          <div class="t">选择车队</div>
          <div>
            <el-button type="primary" @click="gotoAddTeam">添加车队</el-button>
          </div>
          <div>
            <el-table border :data="selectTeamCardList" class="tableStyle">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="fleetname" label="车队名称">
              </el-table-column>
              <el-table-column prop="cardNumber" label="主卡号">
              </el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item prop="maxCount">
          <div class="t">最大参与次数</div>
          <el-input v-model="stepTwoData.maxCount"></el-input>
          <div class="tip">
            单个用户在活动时间内最多能享受几次，0为不限制次数
          </div>
        </el-form-item>
        <el-form-item class="nolable" style="padding: 20px">
          <el-button @click="backPreEvent">返回上一步</el-button>
          <el-button type="primary" @click="oneNextEvent"
            >保存并下一步</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="step_form step_two step_three" v-show="stepActive === 3">
      <el-form
        :model="stepThreeData"
        :rules="stepThreeDataRules"
        ref="ruleForm3"
        class="form-com-css"
      >
        <el-form-item class="three-one">
          <el-alert
            class="alert-style"
            title="请根据以下条件设置活动金额"
            type="info"
            show-icon
          >
          </el-alert>
          <div class="t-top-tip">
            <p class="t">
              活动用途<i>{{ activityUse[stepOneData.activityUse] }}</i>
            </p>
            <p class="t">
              活动类型<i>{{ activityType[stepOneData.activityType] }}</i>
            </p>
            <p class="t">
              活动方式<i>{{ activityMode[stepOneData.activityMode] }}</i>
            </p>
          </div>
        </el-form-item>
        <el-form-item prop="younplist">
          <div class="t">参与活动商品选择</div>
          <div>
            <el-button :type="stepTwoData.oilPartOrAll ? 'primary' : ''"
              >全部商品</el-button
            >
            <el-button :type="stepTwoData.oilPartOrAll ? '' : 'primary'"
              >单个商品</el-button
            >
          </div>
          <!-- （1）活动方式 属于【定额立减】和【百分比立减】时   （activityMode活动方式 ： FAD 定额立减 ；PAR 百分比立减  ；RDD 随机立减 ）-->
          <div class="three-list" v-if="stepOneData.activityMode != 'RDD'">
            <!-- 不知道 oilPartOrAll 这个是干嘛的，好像他的值一直是false-->
            <div class="three-list" v-if="stepTwoData.oilPartOrAll">
              <el-row
                type="flex"
                class="row-bg oil-col"
                v-for="(rule, i) in rules"
                :key="i"
              >
                <el-col :span="2"><el-button>满</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.full" style="width: 90%"></el-input
                  >{{ fullUnit[stepOneData.activityType] }}</el-col
                >
                <el-col :span="2" :offset="1"><el-button>减</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.cut" style="width: 90%"></el-input
                  >{{ cutUnit[stepOneData.activityMode] }}</el-col
                >
                <template v-if="i == 0">
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="addRulesListEvent('rules', i)"
                      type="primary"
                      >添加</el-button
                    ></el-col
                  >
                </template>
                <template v-else>
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="reduceListEvent(rules, i)"
                      type="primary"
                      >删除</el-button
                    ></el-col
                  >
                </template>
              </el-row>
            </div>
            <div class="three-list" v-else>
              <div v-for="(oil, index) in selectOilList" :key="index">
                <div class="disflx oilNameDiv">
                  <div>
                    油品名称：<b>{{ oil.oilName }}</b>
                  </div>
                </div>
                <el-row
                  type="flex"
                  class="row-bg"
                  v-for="(rule, i) in oil.rules"
                  :key="i"
                >
                  <!-- <el-col v-if="stepOneData.activityType !== 'AAL'" :span="2"><el-button>满</el-button></el-col>
                  <el-col v-if="stepOneData.activityType !== 'AAL'" :span="7"><el-input v-model="rule.full"
                      style="width: 90%"></el-input>{{ fullUnit[stepOneData.activityType] }}</el-col> -->
                  <el-col :span="7">
                    <span>
                      {{
                        stepOneData.activityUse == "RCH" ? "充值满" : "消费满"
                      }}
                    </span>
                    <el-input
                      v-model="rule.full"
                      style="width: 60% !important; margin: 0 10px"
                    />
                    <span>{{ fullUnit[stepOneData.activityType] }}时</span>
                  </el-col>
                  <el-col
                    :span="3"
                    :offset="stepOneData.activityType !== 'AAL' ? 1 : 0"
                  >
                    <!--
                      活动用途 activityUse : CSP 消费     RCH 充值    LABEL 标签
                      活动类型 activityType : RFA 按固定金额  LOR 按固定数量  AAL 每升立减
                      活动方式 activityMode : FAD 定额立减    PAR 百分比立减  RDD 随机立减

                       2 活动用途 是 充值时
                        （1）活动类型：按固定金额 和 按固定升数时：
                                  活动方式：定额立减和百分比立减： 显示 “每笔订单立减”
                                  活动方式：随机立减：            显示“每笔订单随机立减”
                        （2）活动类型：每升立减
                                  活动方式：定额立减和百分比立减： 显示 “每笔订单每升立减”
                                  活动方式：随机立减              显示 “每笔订单每升随机立减”

                     -->
                    <!-- 1、活动用途 是 消费 和 标签时 -->
                    <span v-if="stepOneData.activityUse != 'RCH'">
                      {{
                        (stepOneData.activityType == "RFA" ? "减" : "") +
                        (stepOneData.activityType == "LOR" ? "减" : "") +
                        (stepOneData.activityType == "AAL"
                          ? "每升价格减"
                          : "") +
                        (stepOneData.activityType == "AALL" ? "每升价格减" : "")
                      }}
                    </span>
                    <!--  2 活动用途 是 充值时-->
                    <span v-if="stepOneData.activityUse == 'RCH'">
                      <span v-if="stepOneData.activityType != 'AAL'">
                        {{
                          stepOneData.activityMode == "RDD"
                            ? "每笔订单随机立减"
                            : "每笔订单立减"
                        }}
                      </span>
                      <span v-if="stepOneData.activityType == 'AAL'">
                        {{
                          stepOneData.activityMode == "RDD"
                            ? "每笔订单每升随机立减"
                            : "每笔订单每升立减"
                        }}
                      </span>
                    </span>
                  </el-col>
                  <el-col :span="7">
                    <el-input v-model="rule.cut" style="width: 90%"></el-input>
                    {{ cutUnit[stepOneData.activityMode] }}
                  </el-col>
                  <el-col :span="4" :offset="1">
                    <el-button
                      @click="reduceListEvent(oil.rules, i)"
                      type="primary"
                      >删除</el-button
                    >
                  </el-col>
                  <el-col
                    v-if="selectOilList[index].rules.length === i + 1"
                    :span="4"
                  >
                    <el-button
                      @click="addListEvent('selectOilList', index, i)"
                      type="primary"
                      >添加</el-button
                    >
                  </el-col>
                  <el-col v-else :span="4" />
                </el-row>
              </div>
            </div>
          </div>
          <!-- (2) 活动方式是随机立减时 （随机立减开始 ） -->
          <div class="three-list" v-else>
            <div class="three-list" v-if="stepTwoData.oilPartOrAll">
              <el-row type="flex" class="row-bg">
                <el-col :span="2"><el-button>预算</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="stepThreeData.budget"></el-input
                ></el-col>
              </el-row>
              <el-row
                type="flex"
                class="row-bg"
                v-for="(rule, i) in rules"
                :key="i"
              >
                <el-col :span="2"><el-button>订单金额</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.full" style="width: 90%"></el-input
                  >{{ fullUnit[stepOneData.activityType] }}</el-col
                >
                <el-col :span="2" :offset="1"
                  ><el-button>解价区间</el-button></el-col
                >
                <el-col :span="7"
                  ><el-input v-model="rule.cutMin" style="width: 90%"></el-input
                  >{{ cutUnit[stepOneData.activityMode] }}</el-col
                >
                <el-col :span="2" :offset="1"><el-button>-</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="rule.cutMax" style="width: 90%"></el-input
                  >{{ cutUnit[stepOneData.activityMode] }}</el-col
                >
                <template v-if="i == 0">
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="addRulesListEvent('rules')"
                      type="primary"
                      >添加</el-button
                    ></el-col
                  >
                </template>
                <template v-else>
                  <el-col :span="4" :offset="1"
                    ><el-button
                      @click="reduceListEvent(rules, i)"
                      type="primary"
                      >删除</el-button
                    ></el-col
                  >
                </template>
              </el-row>
            </div>
            <div class="three-list" v-else>
              <el-row type="flex" class="row-bg">
                <el-col :span="2"><el-button>预算</el-button></el-col>
                <el-col :span="7"
                  ><el-input v-model="stepThreeData.budget"></el-input
                ></el-col>
              </el-row>
              <div v-for="(oil, index) in selectOilList" :key="index">
                <div class="disflx oilNameDiv">
                  <div>
                    油品名称：<b>{{ oil.oilName }}</b>
                  </div>
                  <!-- <div><el-button @click="addListEvent('selectOilList', index)" type="primary">添1加</el-button></div> -->
                </div>
                <el-row
                  type="flex"
                  class="row-bg"
                  v-for="(rule, i) in oil.rules"
                  :key="i"
                >
                  <el-col :span="2">
                    <!--随机立减 ( 活动用途 = 消费或标签) -->
                    <el-button v-if="stepOneData.activityUse != 'RCH'">
                      订单金额
                    </el-button>
                    <!-- 随机立减 (活动用途 = 充值 ) -->
                    <el-button v-if="stepOneData.activityUse == 'RCH'">
                      {{
                        stepOneData.activityUse == "RCH" ? "充值满" : "消费满"
                      }}
                    </el-button>
                  </el-col>
                  <el-col :span="7"
                    ><el-input v-model="rule.full" style="width: 90%"></el-input
                    >{{ fullUnit[stepOneData.activityType] }}</el-col
                  >
                  <el-col :span="4" :offset="1">
                    <!-- 活动用途 = 消费或标签,活动方式=随机立减时-->
                    <el-button v-if="stepOneData.activityUse != 'RCH'">
                      解价区间
                    </el-button>
                    <!-- 活动用途 = 充值， 活动方式 = 随机立减 -->
                    <el-button v-if="stepOneData.activityUse == 'RCH'">
                      {{
                        stepOneData.activityType == "AAL"
                          ? "每笔订单每升随机立减"
                          : "每笔订单随机立减"
                      }}
                      {{
                        stepOneData.activityType == "AALL"
                          ? "每笔订单每升随机立减"
                          : "每笔订单随机立减"
                      }}
                    </el-button>
                  </el-col>
                  <el-col :span="7"
                    ><el-input
                      v-model="rule.cutMin"
                      style="width: 90%"
                    ></el-input
                    >{{ cutUnit[stepOneData.activityMode] }}</el-col
                  >
                  <el-col :span="2" :offset="1">
                    <el-button>-</el-button>
                  </el-col>
                  <el-col :span="7"
                    ><el-input
                      v-model="rule.cutMax"
                      style="width: 90%"
                    ></el-input
                    >{{ cutUnit[stepOneData.activityMode] }}</el-col
                  >
                  <el-col :span="4" :offset="1">
                    <el-button
                      @click="reduceListEvent(oil.rules, i)"
                      type="primary"
                    >
                      删除
                    </el-button>
                  </el-col>
                  <el-col
                    :span="4"
                    :offset="1"
                    v-if="selectOilList[index].rules.length === i + 1"
                  >
                    <el-button
                      @click="addListEvent('selectOilList', index, i)"
                      type="primary"
                      >添加</el-button
                    >
                  </el-col>
                  <el-col :span="4" :offset="1" v-else />
                </el-row>
              </div>
            </div>
          </div>
          <!--  随机立减结束 -->
        </el-form-item>
        <!-- 活动限制 -->
        <el-form-item v-if="stepOneData.activityUse === 'RCH'">
          <p class="t">活动限制</p>
          <el-checkbox-group
            v-model="stepThreeData.rechargeActivityRechargeEnable"
          >
            <el-checkbox class="block" :label="1"
              >充值时允许累计充值立减余额</el-checkbox
            ></el-checkbox-group
          >
          <el-checkbox-group
            v-model="stepThreeData.rechargeActivityConsumeEnable"
          >
            <el-checkbox class="block" :label="1"
              >消费时允许使用充值立减余额</el-checkbox
            ></el-checkbox-group
          >
        </el-form-item>
        <!-- 生效时段 -->
        <el-form-item prop="timeModes">
          <p class="t">
            生效时段
            <el-checkbox-group
              v-model="stepThreeData.timeModes"
              @change="changeTimeMode"
            >
              <el-checkbox
                class="block"
                label="all"
                :disabled="
                  stepThreeData.timeModes.includes('week') ||
                  stepThreeData.timeModes.includes('month')
                "
                >全部时段</el-checkbox
              >
              <el-checkbox
                class="block"
                label="week"
                :disabled="stepThreeData.timeModes.includes('all')"
              >
                按周选择
                <div
                  style="padding: 20px 20px 0 20px; display: inline-block"
                  v-show="stepThreeData.timeModes.includes('week')"
                >
                  <el-checkbox-group
                    v-model="stepThreeData.weeks"
                    size="medium"
                  >
                    <el-checkbox-button
                      v-for="day in daysOfWeek"
                      :label="day"
                      :key="day"
                      >{{ day }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                </div>
              </el-checkbox>
              <div
                v-show="stepThreeData.timeModes.includes('week')"
                style="display: flex"
              >
                <span class="title1">生效时间</span>
                <template>
                  <el-time-picker
                    value-format="HH:mm:ss"
                    is-range
                    size="mini"
                    v-model="stepThreeData.weeksTime"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                  ></el-time-picker>
                </template>
                <div style="margin-left: 40px">
                  <el-radio
                    v-model="stepThreeData.weekTimeRangeType"
                    label="each"
                  >
                    按天执行</el-radio
                  >
                  <el-radio
                    v-model="stepThreeData.weekTimeRangeType"
                    label="entire"
                    >按最后一天执行</el-radio
                  >
                </div>
              </div>

              <el-checkbox
                class="block"
                label="month"
                :disabled="stepThreeData.timeModes.includes('all')"
              >
                按月选择
                <div
                  style="padding: 20px 20px 0 20px; display: inline-block"
                  v-show="stepThreeData.timeModes.includes('month')"
                >
                  <el-checkbox-group v-model="stepThreeData.days" size="medium">
                    <el-checkbox-button
                      v-for="day in daysOfMonth"
                      :label="day"
                      :key="day"
                      >{{ day }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                  <el-checkbox-group v-model="stepThreeData.days" size="medium">
                    <el-checkbox-button
                      v-for="day in daysOfMonth2"
                      :label="day"
                      :key="day"
                      >{{ day }}</el-checkbox-button
                    >
                  </el-checkbox-group>
                </div>
              </el-checkbox>
              <div
                v-show="stepThreeData.timeModes.includes('month')"
                style="display: flex"
              >
                <span class="title1">生效时间</span>
                <template>
                  <el-time-picker
                    value-format="HH:mm:ss"
                    is-range
                    size="mini"
                    v-model="stepThreeData.daysTime"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围"
                  ></el-time-picker>
                </template>
                <div style="margin-left: 40px">
                  <el-radio
                    v-model="stepThreeData.monthTimeRangeType"
                    label="each"
                  >
                    按天执行</el-radio
                  >
                  <el-radio
                    v-model="stepThreeData.monthTimeRangeType"
                    label="entire"
                    >按最后一天执行</el-radio
                  >
                </div>
              </div>
            </el-checkbox-group>
          </p>
        </el-form-item>
        <!-- 优惠券互斥 -->
        <el-form-item>
          <div class="disflx mt12">
            <p class="t">优惠券互斥</p>
            <el-alert
              class="alert-style"
              title="配置活动是否存在和优惠劵互斥的限制"
              type="info"
              show-icon
            >
            </el-alert>
          </div>
          <div>
            <el-radio v-model="stepThreeData.activityRule" label="1"
              >使用本活动时，用户可用优惠劵</el-radio
            >
            <br />
            <el-radio v-model="stepThreeData.activityRule" label="2"
              >使用本活动时，用户不可用优惠券</el-radio
            >
          </div>
        </el-form-item>
        <!--
          电子卡互斥
          活动用途选择“充值”时  只能选择 “”使用本活动时，仅限电子卡支付
        -->
        <el-form-item>
          <div class="disflx mt12">
            <p class="t">电子卡互斥</p>
            <el-alert
              class="alert-style"
              title="配置活动是否存在和电子卡互斥的限制"
              type="info"
              show-icon
            >
            </el-alert>
          </div>
          <div>
            <el-radio
              v-model="stepThreeData.cardFlag"
              label="0"
              :disabled="stepOneData.activityUse == 'RCH'"
              >使用本活动时，用户都可用</el-radio
            >
            <br />
            <el-radio
              v-model="stepThreeData.cardFlag"
              label="1"
              :disabled="stepOneData.activityUse == 'RCH'"
              >使用本活动时，仅限微信支付</el-radio
            >
            <br />
            <el-radio v-model="stepThreeData.cardFlag" label="2"
              >使用本活动时，仅限电子卡支付</el-radio
            >
          </div>
        </el-form-item>
        <!--
          防作弊设置
          活动用途选择充值时，防作弊设置板块隐藏
        -->
        <el-form-item
          class="zuobi-limit"
          v-if="stepOneData.activityUse !== 'RCH'"
        >
          <div class="t">防作弊设置</div>
          <el-row>
            <el-col :span="3">参与次数限制</el-col>
            <el-col :span="21">
              <div class="join-limit">
                <div class="disflx three-b">
                  <el-radio v-model="stepThreeData.antiCheating" label="1">
                    同一ID一个自然天只能使用一次
                  </el-radio>
                </div>
                <div class="disflx three-b">
                  <el-radio v-model="stepThreeData.antiCheating" label="0"
                    >自定义次数</el-radio
                  >
                  <el-input
                    :disabled="stepThreeData.antiCheating != 0"
                    v-model="stepThreeData.countOfDay"
                  ></el-input>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3">设置门槛上限</el-col>
            <el-col :span="21" class="join-menkan">
              <div class="disflx three-b">
                <span>超过</span>
                <el-input
                  v-model="stepThreeData.amtUpperLimit"
                  size="samll"
                  style="width: 150px"
                ></el-input>
                <span>元，不享受立减优惠</span>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="zuobi-limit" style="margin-bottom: 20px">
          <el-form-item
            style="margin-bottom: 0 !important; border-bottom: none !important"
            prop="sendFlag"
          >
            <div class="t">活动通知</div>
            <div>是否发送活动通知</div>
            <el-row>
              <el-col :span="21">
                <el-radio-group v-model="stepThreeData.sendFlag">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item
            prop="wxContent"
            v-if="stepThreeData.sendFlag === 1"
            style="border-top: none !important"
          >
            <el-input
              v-model="stepThreeData.wxContent"
              size="small"
              maxlength="20"
              show-word-limit
              placeholder="推送内容仅限20个字"
              style="width: 400px; display: block; margin-bottom: 10px"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item prop="startdate">
          <div class="t">活动开始时间</div>
          <div @click="getStartTime">
            <el-radio v-model="stepThreeData.isimm" label="isimm"
              >立即执行</el-radio
            >
          </div>
          <div class="date-css">
            <el-date-picker
              popper-class="date-style"
              v-model="stepThreeData.startdate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item prop="enddate">
          <div class="t">活动结束时间</div>
          <div class="date-css">
            <el-date-picker
              popper-class="date-style"
              v-model="stepThreeData.enddate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item class="nolable" style="padding: 20px">
          <el-button @click="backPreEvent">返回上一步</el-button>
          <el-button
            type="primary"
            @click="submitForm"
            :disabled="this.$route.query.activeStatus == 1"
            >保存并提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!--弹框-->
    <el-dialog
      :title="'添加油品'"
      :visible.sync="oilOpen"
      width="800px"
      append-to-body
    >
      <el-table
        :data="oilList"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionOilChange"
        ref="multipleTableOil"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="oilName" label="品名" align="left">
        </el-table-column>
        <el-table-column prop="oilClass" label="类型" align="left">
        </el-table-column>
        <el-table-column prop="oilType" label="型号" align="left">
        </el-table-column>
        <el-table-column prop="unitCode" label="单位" align="left">
          <template slot-scope="scope">
            {{ scope.row.unitCode == "1" ? "(L/kg)" : "" }}
            {{ scope.row.unitCode == "2" ? "千克" : "" }}
            {{ scope.row.unitCode == "3" ? "公斤" : "" }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
    <el-dialog
      :title="'添加油站'"
      :visible.sync="stationOpen"
      width="850px"
      append-to-body
      :before-close="handleClose"
    >
      <el-table
        :data="stationList"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionStationChange"
        ref="multipleTable"
      >
        <el-table-column type="selection"> </el-table-column>
        <af-table-column prop="stationName" label="油站名称" align="left">
        </af-table-column>
        <af-table-column prop="stationCode" label="油站编码" align="left">
        </af-table-column>
        <!--
        <af-table-column
          prop="isAlipayFlag"
          label="是否启用支付宝"
          align="left"
        >
          <template slot-scope="scope">
            {{ scope.row.isAlipayFlag == "0" ? "关闭" : "" }}
            {{ scope.row.isAlipayFlag == "1" ? "启动" : "" }}
          </template>
        </af-table-column>
        -->
        <af-table-column prop="status" label="油站状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.status == "0" ? "停用" : "" }}
            {{ scope.row.status == "1" ? "启用" : "" }}
          </template>
        </af-table-column>
        <af-table-column prop="leader" label="联系人" align="left">
        </af-table-column>
        <af-table-column prop="phone" label="联系电话" align="left">
        </af-table-column>
        <af-table-column align="left" prop="regionDataList" label="省市区">
          <template slot-scope="scope">
            {{
              !scope.row.regionDataList
                ? ""
                : translateCodeToAddress(scope.row.regionDataList).toString()
            }}
          </template>
        </af-table-column>
        <af-table-column prop="detailRegionData" label="详情地址" align="left">
        </af-table-column>
        <af-table-column prop="stationLatitude" label="油站经度" align="left">
        </af-table-column>
        <af-table-column prop="stationLongitude" label="油站纬度" align="left">
        </af-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
    <!-- 添加车队弹框 -->
    <el-dialog
      :title="'添加油品'"
      :visible.sync="teamCardOpen"
      width="800px"
      append-to-body
    >
      <el-table
        :data="selectTeamCardList"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionTeamCardChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="" label="车队名称" align="left">
        </el-table-column>
        <el-table-column prop="" label="主卡号" align="left"> </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import translateAddress from "@/utils/translateAddress.js";
import {
  addReductionActivity,
  getReductionActivity,
} from "@/api/market/reductionActivity";
import {
  discountOilName,
  getOilListByLogin,
  getStationList,
  addOil,
  upOil,
  delOil,
} from "@/api/dept";
export default {
  name: "Market_Reduction",
  data() {
    var validateStation = (rule, value, callback) => {
      if (this.stationList.length == 1) {
        callback();
      } else if (this.selectStationList.length < 1) {
        callback(new Error("请选择油站"));
      } else {
        callback();
      }
    };
    var validateOilList = (rule, value, callback) => {
      if (this.selectOilList.length < 1) {
        callback(new Error("请选择参与活动的油品"));
      } else {
        callback();
      }
    };
    var validateStepTwoData = (rule, value, callback) => {
      const memberCategories = this.stepTwoData.memberCategories;
      if (this.stepTwoData.memberCondition == "part") {
        // 原逻辑
        // if (this.stepTwoData.memberLevels?.length === 0) {
        //   callback(new Error("请选择参与活动的会员等级"));
        // } else if (this.stepTwoData.paymentMethods?.length === 0) {
        //   if (
        //     this.stepTwoData.cardTypes?.length === 0 &&
        //     this.stepTwoData.physicalCardTypes?.length === 0
        //   ) {
        //     callback(new Error("请选择参与活动的支付方式"));
        //   }
        // } else if (
        //   !memberCategories.includes("old") &&
        //   !memberCategories.includes("new")
        // ) {
        //   callback(new Error("请选择适用用户类型"));
        // }
        if (this.stepTwoData.physicalCardTypes?.length > 0) {
          callback();
        } else if (this.stepTwoData.memberLevels?.length === 0) {
          callback(new Error("请选择参与活动的会员等级"));
        } else if (this.stepTwoData.paymentMethods?.length === 0) {
          if (this.stepTwoData.cardTypes?.length === 0) {
            callback(new Error("请选择参与活动的支付方式"));
          }
        } else if (
          !memberCategories.includes("old") &&
          !memberCategories.includes("new")
        ) {
          callback(new Error("请选择适用用户类型"));
        }
      }
      callback();
    };
    var validateTimeModes = (rule, value, callback) => {
      if (this.stepThreeData.timeModes.length == 0) {
        callback(new Error("生效时段不能为空"));
      }
      if (this.stepThreeData.timeModes.includes("week")) {
        if (
          !this.stepThreeData.weeksTime ||
          this.stepThreeData.weeks.length == 0
        ) {
          callback(new Error("请选择周生效时间"));
        }
      }
      if (this.stepThreeData.timeModes.includes("month")) {
        if (
          !this.stepThreeData.daysTime ||
          this.stepThreeData.days.length == 0
        ) {
          callback(new Error("请选择月生效时间"));
        }
      }
      callback();
    };
    return {
      // 关联加油站油站idList
      stationIdList: [],
      // 车主活动板块对应的数组字段
      actList: [
        "paymentMethods",
        "memberLevels",
        "memberTags",
        "memberCategories",
        "cardTypes",
        "physicalCardTypes",
      ],
      dzkList: ["0", "1", "2", "3", "4"], // 电子卡列表
      dkqList: ["0", "1", "2", "3", "4", "dek"], //实体卡列表--消费
      dkqList2: ["0", "1", "2", "3", "4"], //实体卡列表--充值
      isIndeterminatePhysicalCardTypes: false,
      isIndeterminateCardTypes: false,
      isIndeterminateMemberLevels: false, // 是否全选
      isIndeterminatePaymentMethods: false, // 是否全选
      isIndeterminateMemberCategories: false, // 是否全选
      isIndeterminateMemberTags: false, // 是否全选
      checkAllPhysicalCardTypes: false,
      checkAllCardTypes: false,
      checkAllMemberLevels: false, // 参与车主活动 全选值
      checkAllPaymentMethods: false, // 参与车主活动 全选值
      checkAllMemberTags: false, // 参与车主活动 全选值
      checkAllMemberCategories: false, // 参与车主活动 全选值
      daysOfMonth: [
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
      ],
      daysOfMonth2: [
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      daysOfWeek: ["1", "2", "3", "4", "5", "6", "7"],
      fullUnit: { RFA: "元", LOR: "升", AAL: "元", AALL: "升" },
      cutUnit: { FAD: "元", PAR: "%", RDD: "元" },
      activityUse: { CSP: "消费", RCH: "充值", LABEl: "标签" }, // 活动用途
      activityType: {
        RFA: "按固定金额",
        LOR: "按固定升数",
        AAL: "每升立减(以金额为门槛)",
        AALL: "每升立减(以升数为门槛)",
      }, // 活动类型
      activityMode: { FAD: "定额立减", PAR: "百分比立减", RDD: "随机立减" }, // 活动方式
      oilList: [], // 油品列表
      stationList: [],
      selectStationList: [],
      selectOilList: [], // 选中的油品列表
      rules: [{ full: "", cut: "", cutMin: "", cutMax: "" }],
      stepActive: 1,
      oilOpen: false,
      stationOpen: false,
      loading: false,
      // 第一阶段 基本信息的表单信息
      stepOneData: {
        activityId: "",
        activityName: "",
        activityUse: "",
        activityType: "",
        activityMode: "",
      },
      stepOneRule: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度在 3 到 30 个字符",
            trigger: "blur",
          },
        ],
        activityUse: [
          { required: true, message: "请选择活动用途", trigger: "blur" },
        ],
        activityType: [
          { required: true, message: "请选择活动类型", trigger: "blur" },
        ],
        activityMode: [
          { required: true, message: "请选择活动方式", trigger: "blur" },
        ],
      },
      // 第二阶段 生效条件的表单信息
      stepTwoData: {
        oilPartOrAll: true, // 单个油品还是全部油品
        memberCondition: "all", //  参与活动车主的-会员卡等级
        memberLevels: [], //  参与活动车主的-- 用户级别。 ，超级会员
        paymentMethods: [], //  参与活动车主的 -- 支付方式
        memberTags: [], // 参与活动车主的 -- 新、老用户
        physicalCardTypes: [], // 参与活动车主的 -- 实体卡
        cardTypes: [], // 参与活动车主的 -- 电子卡
        memberCategories: [], // 参与活动车主的 -- 标签用户
        maxCount: "",
      },
      stepTwoRules: {
        maxCount: [
          { required: true, message: "请填写最大参与次数", trigger: "change" },
        ],
        selectStationList: [
          { required: true, validator: validateStation, trigger: "change" },
        ],
        youplist: [
          { required: true, validator: validateOilList, trigger: "change" },
        ],
        stepTwoData: [
          { required: true, validator: validateStepTwoData, trigger: "change" },
        ],
      },
      // 第三阶段 限制条件的表单信息
      stepThreeData: {
        // 月
        monthTimeRangeType: null,
        // 周
        weekTimeRangeType: null,
        timeModes: ["all"],
        onenum: 2,
        twonum: 2,
        activityRule: "1",
        antiCheating: "0",
        countOfDay: "9999",
        budget: "",
        days: [],
        weeks: [],
        cardFlag: "0",
        currentNum: 0,
        amtUpperLimit: "9999", // 防作弊--门槛上线
        sendFlag: 1,
        daysTime: ["00:00:00", "23:59:59"], //生效时间
        weeksTime: ["00:00:00", "23:59:59"], //生效时间
        isimm: "",
        startdate: "",
        enddate: "",
        wxContent: "",
        rechargeActivityConsumeEnable: [1],
        rechargeActivityRechargeEnable: [1],
      },
      stepThreeDataRules: {
        startdate: [
          { required: true, message: "选择开始时间", trigger: "change" },
        ],
        enddate: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        timeModes: [
          { required: true, validator: validateTimeModes, trigger: "change" },
        ],
        sendFlag: [
          { required: true, message: "是否发送不能为空", trigger: "change" },
        ],
        wxContent: [
          { required: true, message: "推送内容不能为空", trigger: "blur" },
        ],
      },
      teamCardOpen: false,
      selectTeamCardList: [],
    };
  },
  watch: {
    /**
     * 监听基本对象的变化
     * 活动用途选择“充值”时：
     *  (1)、活动类型只能选择 “每升立减”, 活动方式只能定额立减
     *  (2)、电子卡互斥默认选择“仅限电子卡支付”，其他选项不可选
     * （3)、参与活动车主的支付方式只能选择微信(置空，让他重新选择)
     *  (4)、生效时间段只能选择全部
     * ***/
    stepOneData: {
      handler(obj) {
        if (obj.activityUse === "RCH") {
          this.stepOneData.activityType = "AAL";
          this.stepOneData.activityMode = "FAD";
          this.stepThreeData.cardFlag = "2";
          // this.stepThreeData.rechargeActivityConsumeEnable = [1];
          // this.stepThreeData.rechargeActivityRechargeEnable = [1];
          // this.stepTwoData.paymentMethods = [];
          // this.stepThreeData.timeModes = ["all"];
        }
      },
      deep: true,
    },
    "stepTwoData.memberCondition"(val) {
      if (val === "all") {
        this.stepTwoData.paymentMethods = [];
        this.stepTwoData.memberLevels = [];
        this.stepTwoData.memberTags = [];
        this.stepTwoData.memberCategories = [];
        this.stepTwoData.cardTypes = [];
        this.stepTwoData.physicalCardTypes = [];
      }
      // 这里解决 历史遗留的 编辑时从全选点击到 指定时报错的问题
      // 传的值是数组 ，回显的数据是字符串
      if (val === "part") {
        this.resetArrays();
      }
    },
    "stepThreeData.sendFlag": {
      handler(newValue) {
        if (newValue === 0) {
          this.stepThreeData.wxContent = ""; //清空输入框
        }
      },
      deep: true,
    },
    // 监听每个数组的变化， 来判断是否数组全选了(用于编辑回显)
    "stepTwoData.memberLevels": {
      handler(newValue) {
        this.handleCheckedChange(newValue, "memberLevels");
      },
      deep: true,
      immediate: true,
    },
    "stepTwoData.paymentMethods": {
      handler(newValue) {
        this.handleCheckedChange(newValue, "paymentMethods");
      },
      deep: true,
      immediate: true,
    },
    "stepTwoData.memberCategories": {
      handler(newValue) {
        this.handleCheckedChange(newValue, "memberCategories");
      },
      deep: true,
      immediate: true,
    },
    "stepTwoData.memberTags": {
      handler(newValue) {
        this.handleCheckedChange(newValue, "memberTags");
      },
      deep: true,
      immediate: true,
    },
    "stepTwoData.cardTypes": {
      handler(newValue) {
        this.handleCheckedChange(newValue, "cardTypes");
      },
      deep: true,
      immediate: true,
    },
    "stepTwoData.physicalCardTypes": {
      handler(newValue) {
        this.handleCheckedChange(newValue, "physicalCardTypes");
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getOilList();
    this.initData();
    this.getDefaultStationList();
  },
  methods: {
    // 重置数组
    resetArrays() {
      this.actList.forEach((key) => {
        if (!Array.isArray(this.stepTwoData[key])) {
          this.stepTwoData[key] = [];
        }
      });
    },
    handleClose(done) {
      this.selectOilList = [];
      done();
    },
    // 新添加的电子卡和实体卡类型
    formatType(type) {
      const types = {
        0: "通用卡",
        1: "汽油卡",
        2: "柴油卡",
        4: "CNG卡",
        3: "LNG卡",
      };
      return types[type] || "";
    },
    formatType2(type) {
      const types = {
        0: "实体通用卡",
        1: "实体汽油卡",
        2: "实体柴油卡",
        4: "实体CNG卡",
        3: "实体LNG卡",
        dek: "实体定额卡",
      };
      return types[type] || "";
    },
    formatType3(type) {
      const types = {
        0: "实体通用卡",
        1: "实体汽油卡",
        2: "实体柴油卡",
        4: "实体CNG卡",
        3: "实体LNG卡",
      };
      return types[type] || "";
    },
    /**
     * 参与车主活动全选逻辑
     *1.因为最初的逻辑 多选框的数据不是数组全是写死的数据 ，且每个数据都有单独的判断难以修改
      2.为了实现全选功能 ，手动添加了数组的数据 ，之后新增选项也需要在这里添加
      3.全选按钮 回显逻辑 中为了省事 直接写死了每个数组的长度，如果新增了选项需要修改
     * **/
    handleCheckAllChange(val, type) {
      let newArr = [];
      // 手动写了 多选框的数组
      switch (type) {
        case "memberLevels":
          newArr = ["1", "2", "3", "4", "5", "96", "97", "98"];
          this.isIndeterminateMemberLevels = false;
          break;
        case "paymentMethods":
          if (this.stepOneData.activityUse === "CSP") {
            newArr = ["wx", "zfb", "xj", "yhk", "pos", "cdk"];
          } else if (this.stepOneData.activityUse === "RCH") {
            newArr = ["wx", "xj"];
          }
          this.stepTwoData.paymentMethods = val ? newArr : [];
          this.isIndeterminatePaymentMethods = false;
          break;
        case "memberCategories":
          newArr = ["old", "new"];
          this.isIndeterminateMemberCategories = false;
          break;
        case "memberTags":
          newArr = ["labelUser"];
          this.isIndeterminateMemberTags = false;
          break;
        case "physicalCardTypes":
          if (this.stepOneData.activityUse === "CSP") {
            newArr = this.dkqList;
          } else if (this.stepOneData.activityUse === "RCH") {
            newArr = this.dkqList2;
          }

          this.isIndeterminatePhysicalCardTypes = false;
          break;
        case "cardTypes":
          newArr = this.dzkList;
          this.isIndeterminateCardTypes = false;
          break;
      }
      this.stepTwoData[type] = val ? newArr : [];
    },
    // 全选按钮 回显逻辑
    handleCheckedChange(value, type) {
      let checkedCount = value && value.length;
      // 为了省事直接写了返回的数组最大的长度 8
      switch (type) {
        case "memberLevels":
          this.checkAllMemberLevels = checkedCount === 8; // 8为memberLevels数组写死时最大长度
          this.isIndeterminateMemberLevels =
            checkedCount > 0 && checkedCount < 8;
          break;
        case "paymentMethods":
          if (this.stepOneData.activityUse === "CSP") {
            this.checkAllPaymentMethods = checkedCount >= 6;
            if (checkedCount > 6) {
              this.isIndeterminatePaymentMethods =
                checkedCount > 0 && checkedCount < 8;
            } else {
              this.isIndeterminatePaymentMethods =
                checkedCount > 0 && checkedCount < 6;
            }
          } else if (this.stepOneData.activityUse === "RCH") {
            this.checkAllPaymentMethods = checkedCount === 2;
            this.isIndeterminatePaymentMethods =
              checkedCount > 0 && checkedCount < 2;
          }
          break;
        case "memberCategories":
          this.checkAllMemberCategories = checkedCount === 2;
          this.isIndeterminateMemberCategories =
            checkedCount > 0 && checkedCount < 2;
          break;
        case "memberTags":
          this.checkAllMemberTags = checkedCount === 1;
          this.isIndeterminateMemberTags = checkedCount > 0 && checkedCount < 1;
          break;
        case "physicalCardTypes":
          if (this.stepOneData.activityUse === "RCH") {
            this.checkAllPhysicalCardTypes =
              checkedCount === this.dkqList2.length;
            this.isIndeterminatePhysicalCardTypes =
              checkedCount > 0 && checkedCount < this.dkqList2.length;
          } else if (this.stepOneData.activityUse === "CSP") {
            this.checkAllPhysicalCardTypes =
              checkedCount === this.dkqList.length;
            this.isIndeterminatePhysicalCardTypes =
              checkedCount > 0 && checkedCount < this.dkqList.length;
          }
          break;
        case "cardTypes":
          this.checkAllCardTypes = checkedCount === this.dzkList.length;
          this.isIndeterminateCardTypes =
            checkedCount > 0 && checkedCount < this.dzkList.length;
          break;
      }
    },
    changeTimeMode(val) {
      if (val.length === 0) {
        this.stepThreeData.monthTimeRangeType = null;
        this.stepThreeData.weekTimeRangeType = null;
        this.stepThreeData.weeks = [];
        this.stepThreeData.days = [];
      }
      if (!val.includes("week")) {
        this.stepThreeData.weeks = [];
      } else if (!val.includes("month")) {
        this.stepThreeData.days = [];
      }
      if (val.includes("week")) {
        this.stepThreeData.weekTimeRangeType = "each";
      }
      if (val.includes("month")) {
        this.stepThreeData.monthTimeRangeType = "each";
      }
    },
    // 查询立减活动列表
    initData() {
      var activityId = this.$route.query.activityId;
      if (activityId != null && activityId != "") {
        getReductionActivity(activityId).then((response) => {
          // console.log(response, "response");
          this.selectOilList = response.data.selectOilList;
          this.selectStationList = response.data.selectStationList;

          this.stepOneData.activityId =
            response.data.reductionActivity.activityId;
          this.stepOneData.activityName =
            response.data.reductionActivity.activityName;
          this.stepOneData.activityMode =
            response.data.reductionActivity.activityMode;
          this.stepOneData.activityType =
            response.data.reductionActivity.activityType;
          this.stepOneData.activityUse =
            response.data.reductionActivity.activityUse;
          this.stepOneData.activityUse =
            response.data.reductionActivity.activityUse;

          this.stepTwoData.oilPartOrAll =
            response.data.reductionActivity.oilPartOrAll;
          this.stepTwoData.memberCondition =
            response.data.reductionActivity.memberCondition;
          this.stepTwoData.memberLevels =
            response.data.reductionActivity.memberLevels;
          // 支付类型回显处理
          this.stepTwoData.paymentMethods =
            response.data.reductionActivity.paymentMethods;
          // 电子卡类型回显
          this.stepTwoData.cardTypes =
            response.data.reductionActivity.cardTypes;
          // 实体卡类型回显
          this.stepTwoData.physicalCardTypes =
            response.data.reductionActivity.physicalCardTypes;
          this.stepTwoData.memberCategories =
            response.data.reductionActivity.memberCategories;
          if (typeof response.data.reductionActivity.memberTags === "string") {
            this.stepTwoData.memberTags =
              response.data.reductionActivity.memberTags &&
              response.data.reductionActivity.memberTags.length > 0
                ? response.data.reductionActivity.memberTags.split(",")
                : "";
          } else {
            this.stepTwoData.memberTags =
              response.data.reductionActivity.memberTags;
          }
          this.stepThreeData.weekTimeRangeType =
            response.data.reductionActivity.weekTimeRangeType;
          this.stepThreeData.monthTimeRangeType =
            response.data.reductionActivity.monthTimeRangeType;
          // 活动限制
          this.stepThreeData.rechargeActivityConsumeEnable =
            response.data.reductionActivity.rechargeActivityConsumeEnable !== 0
              ? [1]
              : [];
          this.stepThreeData.rechargeActivityRechargeEnable =
            response.data.reductionActivity.rechargeActivityRechargeEnable !== 0
              ? [1]
              : [];
          this.stepThreeData.startdate =
            response.data.reductionActivity.startDate;
          this.stepThreeData.budget = response.data.reductionActivity.budget;
          this.stepThreeData.enddate = response.data.reductionActivity.endDate;
          this.stepTwoData.maxCount = response.data.reductionActivity.maxCount;
          this.stepThreeData.activityRule =
            response.data.reductionActivity.activityRule;
          this.stepThreeData.antiCheating =
            response.data.reductionActivity.antiCheating;
          this.stepThreeData.countOfDay =
            response.data.reductionActivity.countOfDay;
          // this.stepThreeData.timeModes =
          //   response.data.reductionActivity.timeModes;
          this.stepThreeData.cardFlag =
            response.data.reductionActivity.cardFlag;
          this.stepThreeData.days = response.data.reductionActivity.days
            ? response.data.reductionActivity.days.split(",")
            : [];
          this.stepThreeData.weeks = response.data.reductionActivity.weeks
            ? response.data.reductionActivity.weeks.split(",")
            : [];
          // 生效时间回显、
          this.stepThreeData.timeModes = response.data.reductionActivity
            .timeModes
            ? response.data.reductionActivity.timeModes
            : ["all"];
          const daysTimeArray = [
            response.data.reductionActivity.startTimeOfMonth,
            response.data.reductionActivity.endTimeOfMonth,
          ];
          const weeksTimeArray = [
            response.data.reductionActivity.startTimeOfWeek,
            response.data.reductionActivity.endTimeOfWeek,
          ];
          this.stepThreeData.weeksTime = weeksTimeArray;
          this.stepThreeData.daysTime = daysTimeArray;

          this.stepThreeData.sendFlag = response.data.sendFlag; // 是否推送消息
          this.stepThreeData.wxContent = response.data.wxContent;
          // this.stepThreeData.days = ['1','2'];
          if (response.data.reductionRulesList.length == 0) {
            this.rules = [
              { budget: "", full: "", cut: "", cutMin: "", cutMax: "" },
            ];
          } else {
            this.rules = response.data.reductionRulesList;
          }
          this.stepThreeData.activityRule =
            response.data.reductionActivity.activityRule;
          // 防作弊--门槛上线
          this.stepThreeData.amtUpperLimit =
            response.data.reductionActivity.amtUpperLimit;
          // this.form = response.data;
          // this.open = true;
          // this.title = "修改立减活动";
        });
      }
    },
    // 提交保存
    submitForm() {
      // 原来的代码
      // if (
      //   this.stepOneData.activityMode != "RDD" &&
      //   this.stepOneData.activityType != "AAL"
      // ) {
      //   let isNull = null;
      //   this.selectOilList.forEach((item, index) => {
      //     if (isNull === false) return isNull;
      //     isNull = item.rules.every((rule) => {
      //       return rule.cut && rule.full;
      //     });
      //   });
      //   if (!isNull) {
      //     return this.$message.error("条件值不能为空！！！");
      //   }
      // }
      // 做参与活动商品规则非空判断
      let isNull = null;
      this.selectOilList.forEach((item, index) => {
        if (isNull === false) return isNull;
        isNull = item.rules.every((rule) => {
          return rule.cut && rule.full !== undefined && rule.full !== null;
        });
      });
      if (!isNull) {
        return this.$message.error("条件值不能为空！！！");
      }
      this.$refs.ruleForm3.validate((valid) => {
        if (valid) {
          //拼接参数
          let formData = {};
          formData = JSON.parse(JSON.stringify(this.stepOneData));
          formData["oilPartOrAll"] = this.stepTwoData.oilPartOrAll;
          formData["selectStationList"] = this.selectStationList;
          formData["selectOilList"] = this.selectOilList;
          formData["oilPartOrAll"] = this.stepTwoData.oilPartOrAll;
          formData["memberCondition"] = this.stepTwoData.memberCondition;
          formData["memberLevels"] = this.stepTwoData.memberLevels;
          formData["paymentMethods"] = this.stepTwoData.paymentMethods;
          formData["cardTypes"] = this.stepTwoData.cardTypes;
          formData["physicalCardTypes"] = this.stepTwoData.physicalCardTypes;
          formData["memberCategories"] = this.stepTwoData.memberCategories;
          // formData["memberTags"] = this.stepTwoData.memberTags.join(",");
          if (Array.isArray(this.stepTwoData.memberTags)) {
            formData["memberTags"] = this.stepTwoData.memberTags.join(",");
          } else {
            formData["memberTags"] = this.stepTwoData.memberTags;
          }
          formData["startdate"] = this.stepThreeData.startdate;
          formData["enddate"] = this.stepThreeData.enddate;
          formData["maxCount"] = this.stepTwoData.maxCount;
          formData["activityRule"] = this.stepThreeData.activityRule;
          formData["antiCheating"] = this.stepThreeData.antiCheating;
          formData["countOfDay"] = this.stepThreeData.countOfDay;
          formData["budget"] = this.stepThreeData.budget;
          formData["rules"] = this.rules;
          formData["days"] = this.stepThreeData.days;
          formData["weeks"] = this.stepThreeData.weeks;
          formData["timeModes"] = this.stepThreeData.timeModes;
          formData["cardFlag"] = this.stepThreeData.cardFlag;
          formData["amtUpperLimit"] = this.stepThreeData.amtUpperLimit; // 防作弊-门槛上线
          formData["sendFlag"] = this.stepThreeData.sendFlag;
          formData["wxContent"] = this.stepThreeData.wxContent;
          formData["rechargeActivityConsumeEnable"] =
            this.stepThreeData.rechargeActivityConsumeEnable.length > 0 ? 1 : 0; // 活动限制
          formData["rechargeActivityRechargeEnable"] =
            this.stepThreeData.rechargeActivityRechargeEnable.length > 0
              ? 1
              : 0;
          // 月
          formData["monthTimeRangeType"] =
            this.stepThreeData.monthTimeRangeType;
          // 周
          formData["weekTimeRangeType"] = this.stepThreeData.weekTimeRangeType;

          formData["startTimeOfWeek"] = this.stepThreeData.weeksTime
            ? this.stepThreeData.weeksTime[0]
            : null;
          formData["endTimeOfWeek"] = this.stepThreeData.weeksTime
            ? this.stepThreeData.weeksTime[1]
            : null;
          formData["endTimeOfMonth"] = this.stepThreeData.daysTime
            ? this.stepThreeData.daysTime[1]
            : null;
          formData["startTimeOfMonth"] = this.stepThreeData.daysTime
            ? this.stepThreeData.daysTime[0]
            : null;

          addReductionActivity(formData).then((response) => {
            this.stepOneData.activityId = response.data;
            this.msgSuccess("保存成功");
            this.$router.push({
              path: "/market/reductionActivity",
              query: { refresh: true },
            });
          });
        }
      });
    },
    oneNextEvent() {
      this.$refs["ruleForm" + this.stepActive].validate((valid) => {
        if (valid) {
          this.stepActive++;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    abortEdit() {
      this.$confirm("是否确认关闭编辑页？").then((_) => {
        this.$store.state.tagsView.visitedViews.map((item, index) => {
          if (item.path === "/market/reduction_edit") {
            this.$store.state.tagsView.visitedViews.splice(index, 1);
          }
        });
        this.$router.replace({ path: "/market/reductionActivity" });
      });
    },
    delRowEvent(name, index) {
      this[name].splice(index, 1);
    },
    backPreEvent() {
      this.stepActive--;
    },
    getStartTime() {
      this.stepThreeData.startdate = this.formatter(
        new Date(),
        "yyyy-MM-dd hh:mm:ss"
      );
    },
    /**
     *
     * @param {n} n  模块key
     * @param {i} i 油品下标
     * @param {rulesIndex} rulrulesIndexes 每个油品条件的下标
     */
    addListEvent(n, i, rulesIndex) {
      if (this.stepOneData.activityMode != "RDD") {
        if (
          !this[n][i].rules[rulesIndex].full ||
          !this[n][i].rules[rulesIndex].cut
        ) {
          return this.$message.error("条件值不能为空！！！");
        }
        if (this[n][i].rules.length > 1) {
          this.currentNum = parseInt(this[n][i].rules[rulesIndex - 1].full);
          if (
            parseInt(this[n][i].rules[rulesIndex].full) <=
            parseInt(this[n][i].rules[rulesIndex - 1].full)
          ) {
            this[n][i].rules[rulesIndex].full = "";
            return this.$message.error(
              "当前满额不能小于或等于上一个条件！！！"
            );
          }
        }
      }
      this[n][i].rules.push({ full: "", cut: "", cutMin: "", cutMax: "" });
    },
    addRulesListEvent(n, i) {
      this[n][i].rules.push({ full: "", cut: "", cutMin: "", cutMax: "" });
    },
    //【参与活动商品选择】的 删除 按钮
    reduceListEvent(n, i) {
      // i : 数组下标  n：当前列表数据

      if (n.length === 1) {
        this.$message.warning("已经是最后一个了");
        return;
      } else {
        n.splice(i, 1);
      }
    },
    getOilList() {
      this.loading = true;
      this.stationIdList = cloneDeep(this.selectStationList).map((item) => {
        return item.stationId;
      });
      if (this.stationIdList.length) {
        const oldSelectOilList = cloneDeep(this.selectOilList);
        discountOilName({ stationIdList: this.stationIdList })
          .then((res) => {
            res.rows.forEach((item) => {
              item.rules = [{ full: "", cut: "", cutMin: "", cutMax: "" }];
            });
            this.oilList = res.rows;
            this.$nextTick(() => {
              this.oilList.forEach((element) => {
                oldSelectOilList.forEach((row) => {
                  if (element.oilId == row.oilId) {
                    this.$refs.multipleTableOil.toggleRowSelection(element);
                  }
                });
              });
            });

            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } else {
        this.oilList = [];
        this.loading = false;
      }
    },

    //点击关联加油站
    getStationList() {
      const oldSelectStationList = cloneDeep(this.selectStationList);
      this.stationOpen = true;
      this.loading = true;
      this.stationQuery = {
        enterpriseId: this.presentEnterprise.enterpriseId,
      };
      if (this.$store.state.user.userLevel === "2") {
        this.stationQuery.stationId = this.$store.state.user.stationId;
      }
      getStationList(this.stationQuery)
        .then((res) => {
          this.stationList = res.rows;
          this.$nextTick(() => {
            this.stationList.forEach((element) => {
              oldSelectStationList.forEach((row) => {
                if (element.stationId == row.stationId) {
                  this.$refs.multipleTable.toggleRowSelection(element);
                }
              });
            });
          });
        })
        .finally(() => (this.loading = false));
    },

    // 点击添加油品按钮
    showOilOpen() {
      this.oilOpen = true;
      this.stepTwoData.oilPartOrAll = false;
      this.getOilList();
    },
    // 默认列表
    getDefaultStationList() {
      this.stationQuery = {
        enterpriseId:
          this.presentEnterprise && this.presentEnterprise.enterpriseId,
      };
      if (this.$store.state.user.userLevel === "2") {
        this.stationQuery.stationId = this.$store.state.user.stationId;
      }
      getStationList(this.stationQuery).then((res) => {
        if (res.rows.length == 1) {
          this.stationList = res.rows;
          this.selectStationList = this.stationList;
        }
      });
    },
    // 添加车队
    gotoAddTeam() {
      this.teamCardOpen = true;
      // 然后获取车队列表，
    },

    translateCodeToAddress(codeArr) {
      return translateAddress(codeArr);
    },
    handleSelectionOilChange(val) {
      this.selectOilList = val;
    },
    handleSelectionStationChange(val) {
      this.selectStationList = val;
    },
    // 车队选中行
    handleSelectionTeamCardChange(val) {
      this.selectTeamCardList = val;
    },
    formatter(thistime, fmt) {
      let $this = new Date(thistime);
      let o = {
        "M+": $this.getMonth() + 1,
        "d+": $this.getDate(),
        "h+": $this.getHours(),
        "m+": $this.getMinutes(),
        "s+": $this.getSeconds(),
        "q+": Math.floor(($this.getMonth() + 3) / 3),
        S: $this.getMilliseconds(),
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          ($this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
  },
};
</script>
<style lang="scss">
.title1 {
  width: 50px;
  height: 50px;
  font-size: 12px;
  margin-right: 20px;
  margin-left: 30px;
}
.act_style {
  flex: 1;
  background-color: #f6f4f4;
  padding: 0 20px;
  box-sizing: border-box;
  .el-checkbox {
    margin: 4px 30px 4px 0;
  }
  margin: 8px 0;
}
.redu_root {
  // 防作弊设置
  .zuobi-limit {
    .el-form-item__content {
      .el-row {
        display: flex;
        align-items: center;

        // 参数次数限制
        .join-limit {
          display: flex;
          align-items: center;

          .three-b {
            margin-right: 30px;

            label {
              margin-bottom: 0px;
            }
          }
        }

        // 门槛
        .join-menkan {
          display: flex;
          align-items: center;

          .el-input {
            width: 150px;
            margin: 0px 10px;
          }
        }
      }
    }
  }

  .alert-style {
    width: 50%;
    height: 40px;
    margin-left: 20px;
  }

  .disflx {
    display: flex;
    align-items: center;
    .el-checkbox {
      margin: 4px 30px 4px 0;
    }
  }

  .mt12 {
    margin-top: 12px;
  }

  .redu_title {
    height: 60px;
    font-size: 18px;
    line-height: 60px;
    font-weight: bold;
    background: #ccc;
    color: #000;
    text-indent: 30px;
  }

  .redu_step {
    width: 85%;
    margin: 24px auto;
  }

  .step_form {
    width: 85%;
    margin: 12px auto;

    .form-com-css {
      .el-form-item {
        padding: 20px;
        padding-left: 0;
        border: 1px solid #ccc;

        &.nolable {
          ::v-deep .el-form-item__content {
            margin-left: 20px !important;
          }
        }

        .one-alert {
          margin-top: 10px;
          align-items: center;
        }
      }
    }

    &.step_two {
      .form-com-css {
        .el-form-item {
          padding: 0 24px;

          &.nolable {
            padding: 20px 0;
          }

          .t {
            &::before {
              content: "*";
              color: red;
              margin-right: 5px;
            }
          }

          .tableStyle {
            margin: 20px 0;

            ::v-deep table {
              thead tr th,
              tbody tr td {
                padding: 0;
                text-align: center;
                background: transparent;
              }

              tbody tr td {
                padding: 5px 0;
              }
            }
          }

          .date-css {
            margin-bottom: 15px;

            .el-input {
              width: 50%;
            }
          }
        }
      }
    }

    &.step_three {
      .form-com-css {
        .three-one {
          padding: 20px 0;

          .t-top-tip {
            margin-left: 30px;
            margin-top: 12px;

            p {
              margin-bottom: 0;

              i {
                font-style: normal;
                margin-left: 24px;
                color: #1890ff;
              }
            }
          }
        }

        .three-list {
          .row-bg {
            margin: 12px 0;

            .el-col {
              display: flex;
              align-items: center;
            }
          }

          // .oil-col {
          //   display: flex;
          //   align-items: center;
          // }

          margin: 10px 0;
        }

        .oilNameDiv {
          justify-content: space-between;
        }

        .three-b {
          margin: 12px 0;
          align-items: center;

          .el-alert {
            margin-left: 0;
          }

          .el-input {
            width: 60%;
          }
        }
      }
    }
  }
}

.block {
  display: block;
}

.date-style .el-picker-panel__footer :nth-child(2) {
  color: #ffffff;
  background-color: #409eff;
  border-color: #409eff;
}

.br-sty :nth-of-type(18) .el-checkbox-button__inner {
  border-left: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
}
.checkbox-super {
  width: 110px;
}
</style>
